import React from 'react'
import {
    View,
    Text,
    StyleSheet,
    ActivityIndicator,
    Button,
    Image
} from 'react-native'


let timer = null

class App extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            name: '哈哈哈哈'
        }
    }

    componentDidMount(){
        timer = setTimeout(() => {
            this.setState({
                name: '呜呜呜呜'
            })
        }, 2000)
    }

    componentWillUnmount(){
        if (timer) {
            clearTimeout(timer)
        }
    }
    render(){
        return (
            <View style={{
                    flexDirection: 'row',
                    height: 200
                }}
            >
                <View style={style.item}>
                    <Text>1</Text>
                    <Button title="按钮" onPress={() => alert('hehe')}></Button>
                </View>
                <View style={style.item}>
                    <Test sex="男"></Test>
                    <Image style={{width: 50, height: 50}} source={{uri: 'https://facebook.github.io/react-native/img/tiny_logo.png'}}></Image>
                </View>
                <View style={style.item}>
                    <ActivityIndicator color="blue"/>
                    <Text>{this.state.name}</Text>
                </View>
            </View>
        )
    }
}

class Test extends React.Component{
    constructor(props){
        super(props)
    }
    render(){
        return (
            <View>
                <Text>{this.props.sex}</Text>
            </View>
        )
    }
}

const style = StyleSheet.create({
    item: {
        flex: 1,
        backgroundColor: 'red',
        marginLeft: 5,
        marginRight: 5,
    }
})

export default App